<template>

  <!-- <h1>头部</h1> -->
  <div class="header" style="display: flex;">

    <div class="header-left" style="width: 1200px;">
      <img src="../assets/logo.png" width="300" alt="" class="header-left-img">
    </div>
    <div class="header-right" style="position: relative; width: 100px;">

      <span style="    position: relative;
      top: 17px;">
        {{ userInfo.username }}
      </span>

      <el-dropdown>
        <el-avatar style="position: relative;top: 8px;"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="() => {

              userStore.clearUserInfo()
              router.push('/login')


            }">退出登录</el-dropdown-item>
            <el-dropdown-item>详细信息</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>


  </div>

</template>

<script setup>
import { useUserStore } from "@/stores/userStores";
import { useRouter } from "vue-router";
const userStore = useUserStore();

const userInfo = userStore.getUserInfo();

const router = useRouter();



</script>

<style scoped>
.header {
  height: 50px;
  background-color: rgb(101, 166, 241);
}
</style>